<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%
    String path = request.getContextPath();
    String basePath = path + "/common/web";
%>
<c:set var="basePath" value="<%=basePath%>"></c:set>
<c:set var="path" value="<%=path%>"></c:set>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <title>贷速侠</title>
    <!--<link href="/static/images/img/logo.png?v=1" sizes="114x114" rel="apple-touch-icon-precomposed">-->
    <link rel="stylesheet" type="text/css" href="${basePath}/css/phone.css">
    <link href="${basePath}/images/favicon.png" rel="shortcut icon">
<script type="text/javascript" src="${basePath}/js/base.js"></script>
<script type="text/javascript" src="${basePath}/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="${basePath}/js/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript" src="${basePath}/zmxy/js/global-1.1.0.min.js"></script>
<script type="text/javascript" src="${basePath}/js/layer/1.9.3/layer.js"></script>
    <script type="text/javascript">
    // 根据获取的页面宽度设置页面文字的大小
    // ========================================================================
    var ohtml = document.documentElement;
    getSize();

    function getSize() {
        var screenWidth = ohtml.clientWidth;
        if (screenWidth <= 320) {
            ohtml.style.fontSize = '50px';
        } else if (screenWidth >= 1280) {
            ohtml.style.fontSize = '200px';
        } else {
            ohtml.style.fontSize = screenWidth / (640 / 100) + 'px';
        }
    }
    window.onresize = function() {
        getSize();
    };
    </script>
</head>

<body>
        <div class="header">
            <div style="width:100%;padding-top:0.5rem">
                <img src="${basePath}/images/H5_02.png" style="width:1.92rem;height:0.61rem;margin-left: 0.6rem">
            </div>
            <div style="padding-top: 0.3rem">
                <img src="${basePath}/images/H5_03.png" style="width:100%;height:2.86rem;">
            </div>
            <div style="padding-top:6.45rem">
                <img src="${basePath}/images/H5_05.png" style="width:100%;height:3.15rem;">
            </div>
            <div class="div_form">
                <div class="z_bg">
                    快速注册
                </div>
                <form class="form" id="registerForm">
                    <div class="div_input">
                        <input type="text" name="userPhone" id="userPhone" class="input" placeholder="请输入手机号码">
                    </div>
                    <div class="phone_error" style="height:0.3rem;"></div>
                    <div class="div_input" style="position: relative">
                        <input type="hidden" name="RCaptchaKey" id="RCaptchaKey" value="${RCaptchaKey}"/>
                        <input type="text" class="input" placeholder="请输入图片验证码" name="captcha" id="captcha">
                         <img id="imgCap" class="input_button" style="width:1.5rem; height:0.7rem;margin-top:0;border-left:none;border-radius:0.35rem;" src="<%=path %>/captcha.svl?RCaptchaKey=${RCaptchaKey}" onclick="this.src='<%=request.getContextPath() %>/captcha.svl?RCaptchaKey=${RCaptchaKey}&d='+new Date()*1"/>
                    </div>
                    <div class="img_error" style="height:0.3rem;"></div>
                    <div class="div_input">
                        <input type="passWord" name="passWord" id="passWord" class="input" placeholder="设置密码">
                    </div>
                    <div class="pass_error" style="height:0.3rem;"></div>
                    <div class="div_input" style="position: relative">
                        <input type="text" class="input" placeholder="请输入验证码" name="smsCode" id="smsCode">
                        <button type="button" id="sendcode" class="input_button">获取验证码</button>
                    </div>
                    <div class="yan_error" style="height:0.3rem;"></div>
                    <div class="div_button">
             		<input type="hidden" placeholder="来源" data-role="none" name="channelCode"  id="channelCode" value="14">
             		<input type="hidden"  data-role="none" name="tgFlag"  id="tgFlag" value="DSX-h5">
                        <button type="button" class="button" onclick="nextStep();">申请借款</button>
                    </div>
                </form>
                <div style="text-align:center;color:#fff;margin-top:0.35rem">版权所有：上海斡创信息技术有限公司</div>
            </div>
        </div>

</body>
<script type="text/javascript">
//手机号码正则表达式
var phonePattern = /(^(([0\+]\d{2,3}-)?(0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$)|(^(([0\+]\d{2,3})?(0\d{2,3}))(\d{7,8})((\d{3,}))?$)|(^0{0,1}1[3|4|5|6|7|8|9][0-9]{9}$)/;

//判断变量是否为空
function checkVar(param){
	if(param=='' || param==undefined || param==null){
		return false;
	}
	return true;
}

function nextStep(){//点击注册的时候
	
	var userPhone =	$("#userPhone").val();
	var smsCode =	$("#smsCode").val();
	var passWord = $("#passWord").val();
	var channelCode = $("#channelCode").val();
	var tgFlag = $("#tgFlag").val();
		
	if(!checkVar(userPhone)){
		$(".phone_error").html('<img src="${basePath}/images/xx.png" style="width:0.21rem;height:0.21rem;margin-left:0.2rem"><span style="color:#FF7E2E">请输入手机号码</span>');
		return;
	}else{
		$(".phone_error").text("");
	}
	
	if(phonePattern.test(userPhone) == false){
		$(".phone_error").html('<img src="${basePath}/images/xx.png" style="width:0.21rem;height:0.21rem;margin-left:0.2rem"><span style="color:#FF7E2E">手机号格式不对</span>');
		return;
	}else {
		$(".phone_error").text("");
	}
	
	if(!checkVar(passWord)){
		$(".pass_error").html('<img src="${basePath}/images/xx.png" style="width:0.21rem;height:0.21rem;margin-left:0.2rem"><span style="color:#FF7E2E">请输入密码</span>');
		return;
	}else {
		$(".pass_error").text("");
	}
	
	if(!checkVar(smsCode)){
		$(".yan_error").html('<img src="${basePath}/images/xx.png" style="width:0.21rem;height:0.21rem;margin-left:0.2rem"><span style="color:#FF7E2E">请输入手机验证码</span>');
		return;
	}else {
		$(".yan_error").text("");
	}
	
	if(passWord.length<6){
		$(".pass_error").html('<img src="${basePath}/images/xx.png" style="width:0.21rem;height:0.21rem;margin-left:0.2rem"><span style="color:#FF7E2E">密码必须大于等于6位!</span>');
		return;
	}else{
		$(".pass_error").text("");
	}
		
	var url = "${path}/generalize/register";
	var param = {
			phone:userPhone,
			code:smsCode,
			password:passWord,
			channelCode:channelCode,
			tgFlag:tgFlag
		};
	$.ajax({
		type : "POST",
		async:false,
		url : url,
		data : param,
		dataType : "json",
		success : function(ret) {
		if (ret.code == '0') {
			layer.msg("注册成功");
               window.location.href="<%=path%>/registerSuccess"
		} else {
			$("#password").val("");//密码置为空
			layer.msg(ret.message);

		}
		}
	  });
	}


jQuery(document).ready(function($) {
    //倒计时 
  var wait=60;     
   $('#sendcode').click(function(event) {
	   var phone = $("#userPhone").val();
	   var captcha = $("#captcha").val();
	   var RCaptchaKey = $("#RCaptchaKey").val();
	   
		if (wait != 60) {
			return;
		}
		var data = {};
		data.phone = phone;
		openAjax('${path}/generalize/registerCode?phone='+phone+'&RCaptchaKey='+RCaptchaKey+'&captcha='+captcha, data, checksendSmsCallBack);	
   });
   function checksendSmsCallBack(data){
	   var userPhone = $("#userPhone").val();
	   var captcha = $("#captcha").val();
	   var passWord = $("#passWord").val();
	   
	   if(!checkVar(userPhone)){
		    $(".phone_error").html('<img src="${basePath}/images/xx.png" style="width:0.21rem;height:0.21rem;margin-left:0.2rem"><span style="color:#FF7E2E">请输入手机号码</span>');
			return;
		}else{
			$(".phone_error").text("");
		}
	   
		if(phonePattern.test(userPhone) == false){
        	$(".phone_error").html('<img src="${basePath}/images/xx.png" style="width:0.21rem;height:0.21rem;margin-left:0.2rem"><span style="color:#FF7E2E">手机号格式不对</span>');
		    return;
	    }else{
	    	$(".phone_error").text("");
	    }
		
		if (!checkVar(captcha)){
			$(".img_error").html('<img src="${basePath}/images/xx.png" style="width:0.21rem;height:0.21rem;margin-left:0.2rem"><span style="color:#FF7E2E">请输入正确的图形验证码！</span>');
	        return false;
	    }else{
	    	$(".img_error").text("");
		}
		
		if(!checkVar(passWord)){
			$(".pass_error").html('<img src="${basePath}/images/xx.png" style="width:0.21rem;height:0.21rem;margin-left:0.2rem"><span style="color:#FF7E2E">请输入密码</span>');
			return;
		}else {
			$(".pass_error").text("");
		}
		
		if(passWord.length<6){
			$(".pass_error").html('<img src="${basePath}/images/xx.png" style="width:0.21rem;height:0.21rem;margin-left:0.2rem"><span style="color:#FF7E2E">密码必须大于等于6位!</span>');
			return;
		}else{
			$(".pass_error").text("");
			if (data.code == '0') {
				layer.msg("短信已发送");
				time();
			} else{
				$("#imgCap").trigger("click");
				layer.msg(data.message);
			}
		}
  }
    function time(){
      if (wait==0) {
          $('#sendcode').text('获取验证码');
          wait=60;
          }else{
              $('#sendcode').text(wait+'秒后重试');
              wait--;
              setTimeout(function(){time();}, 1000);
          }
      }
  });

/**************获取url输入channelCode****************/
function GetQueryString(name){
     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
     var r = window.location.search.substr(1).match(reg);
     if(r!=null)return  unescape(r[2]); return null;
}
var code = GetQueryString("channelCode");
if(null!=code){
	$("#channelCode").val(code);
}
</script>
</html>